
<!-- <!DOCTYPE html> -->
<html>
  <head>
    <meta charset="utf-8" />
	<style>
	  .citymap{
	  width: 100%;
	  height: 100%;
	  }
      .citymap{
        width: 100%;
        /* background-color: lightblue; */
      }
	</style>
    <script src="../mapScatter/static/js/jquery-3.5.1.js"></script>
  	<script src="../mapScatter/static/js/echarts.js"></script>
	<script src="../mapScatter/static/js/jiang1_su1_su1_zhou1.js"></script>
  </head>
  <body>
	<div id='su1_zhou1' class='citymap'></div>
	<!-- <script src='https://echarts-maps.github.io/echarts-china-cities-js/demo.js'></script> -->
	<script>
        // make_city("苏州","su1_zhou1")
        achart = echarts.init(document.getElementById("su1_zhou1"));
        // var option =  {
        //     "title": [
        //         {
        //             "textStyle": {
        //                 "color": "#000", 
        //                 "fontSize": 18
        //             }, 
        //             "subtext": "", 
        //             "text": "苏州", 
        //             "top": "auto", 
        //             "subtextStyle": {
        //                 "color": "#aaa", 
        //                 "fontSize": 12
        //             }, 
        //             "left": "auto"
        //         }
        //     ], 
        //     "legend": [
        //         {
        //             "selectedMode": "multiple",
        //             "top": "top",
        //             "orient": "horizontal",
        //             "data": [
        //                 ""
        //             ],
        //             "left": "center",
        //             "show": true
        //         }
        //     ],
        //     "backgroundColor": "#fff",
        //     "series": [
        //         {
        //             "mapType": "苏州",
        //             "data": [],
        //             "name": "",
        //             "symbol": "circle",
        //             "type": "map",
        //             "roam": true
        //         }
        //     ]
        // };
        // 直接在JavaScript中使用模板变量
        var geoCoordMap = {
            "vin123456":'{{list}}'.split(',')
        };
        console.log('{{list}}'.split(','));
        // 'gcj_latitude': 31.334872689399628,
		// 'gcj_longitude': 120.7937100727794
        
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push(geoCoord.concat(data[i].value).concat(data[i].name));
                }
            }
            console.log(res);
            return res;
        };



        var option = {
            title: {
                text: '车辆地图散点',
                subtext: 'data from BOSCH',
                // sublink: 'http://BOSCH.com.cn/',
                left: 'center',
                textStyle: {
                    color: '#000'
                }
            },
            tooltip: {
                trigger: 'iteam',
                formatter:function(params){
                    console.log(params);
                    console.log(params.data[3]);
                    var res = '名称'+params.data[3]+'<br/>';
                    return res;                    
                }
            },
            legend: {
                orient: 'vertical',
                top: 'bottom',
                left: 'right',
                data:['vin123456'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: 300,
                splitNumber: 5,
                color: ['#d94e5d','#eac736','#50a3ba'],
                textStyle: {
                    color: '#fff'
                },
                dimension:3
            },
            geo: {
                map: '苏州',
                label: {
                    normal: {
                        show:true,
                        areaColor: '#ffefd5',
                        borderColor: '#111',
                        textStyle:{color:"#000000"}
                    },
                    emphasis: {
                        show: false,
                        textStyle:{color:"#fff"}
                    }
                },
                itemStyle: {
                    normal: {
                        show:false,
                        areaColor: '#ffefd5',
                        borderColor: '#696969'
                    },
                    emphasis: {
                        show:false,
                        areaColor: '#f47920'
                    }
                }
            },
            series: [
                {
                    name: '苏州',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "vin123456"}
                    ]),
                    encode: {
                        value: 2
                    },
                    symbol: 'circle',
                    symbolSize: 5,
                    label: {
                        normal: {
                                show: true,//显示市区标签
                                textStyle:{color:"#000000"}//省份标签字体颜色
                            },
                        emphasis: {//对应的鼠标悬浮效果
                            show: true,    //关闭文字 （这东西有问题得关）
                            textStyle:{color:"#000000"}
                        }
                    },
                    itemStyle: {
                        normal: {
                                borderWidth: 1,//区域边框宽度
                                borderColor: '#4b0082',//区域边框颜色
                                areaColor:"#4b0082",//区域颜色
                            },
                        emphasis: {
                            borderWidth: 1,
                            borderColor: '#4b0082',
                            areaColor:"#4b0082",
                        }
                    }
                }
            ]
        };
	    achart.setOption(option);
	</script>
  </body>
</html>